<template>
  <div>
    <h1>用户登录列表页面</h1>
    <input type="button" value="管理员-投资管理" @click="paths" >
    <table>
      <tr>
        <td>用户名</td>
        <td>密码</td>
        <td>状态</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in info">
        <td>{{item.UserName}}</td>
        <td>******</td>
        <td>{{item.States}}</td>
        <td>
          <a @click="del(item.Uid)">删除</a>
        </td>
      </tr>
    </table>

    总共<span>{{PageCount}}</span>页
    每页显示<span>{{query.size}}</span>条
    当前<span>{{query.index}}</span>/
    <span>{{ListCount}}</span>页



    <a @click="page(1)">首页</a>
    <a @click="page(query.index-1)">上一页</a>
    <a @click="page(query.index+1)">下一页</a>
    <a @click="page(ListCount)">尾页</a>
  </div>
</template>

<script setup lang="ts">
    import router from '@/router';
import axios from 'axios';
    import {reactive,toRefs,onMounted} from 'vue'
   
    let data:any=reactive({
      info:[],
      query:{
        index:1,
        size:2
      },
      PageCount:'',
      ListCount:''
    })

    let {info,query,PageCount,ListCount} =toRefs(data);

    onMounted(()=>{
      getList();
    })

    const page=(i:any)=>{
      console.log(i);
      
      if (i>=0 && i<=ListCount.value) {
        query.value.index=i;
        getList();
      }
    }

    const paths=()=>{
        router.push('/userMoney');
    }

    const del=(id:any)=>{
      if (confirm('是否删除')) {
        axios({
          url:'/api/User/Del',
          method:'get',
          params:{id:id}
        }).then(res=>{
          if (res.data>0) {
            alert('删除成功');
            query.value.index=1;
            getList();
          }
        }).catch(err=>{
          alert('删除失败');
        })
      } 

    }

    const getList=()=>{
      axios({
        url:'/api/User/GetShow',
        method:'get',
        params:query.value
      }).then(res=>{
        console.log(res.data);
        
        info.value=res.data.Date
        PageCount.value=res.data.PageCount
        ListCount.value=res.data.ListCount
      }).catch(err=>{

      })
    }


</script>

<style scoped>

</style>
